<!DOCTYPE html>
<html>
<head>
    <style>
        .clearfix{
            /* IE6、7专有 */
            *zoom: 1;
        }
        /* .clearfix:after{
            content: "";
            display: block;
            height: 0;
            clear: both;
            visibility: hidden;
        } */
        .clearfix:before,
        .clearfix:after{
            content: "";
            display: table;
        }
        .clearfix:after{
            clear: both;
        }
        .box{
            width: 960px;
            border: 1px solid black;
            margin: 10px auto;
            /* overflow: hidden; */
        }
        .damao{
            background-color: cadetblue;
            width: 100px;
            height: 200px;
            float: left;
        }
        .ermao{
            background-color: rgb(93, 122, 81);
            width: 150px;
            height: 100px;
            float: left;
        }
        .footer{
            height: 100px;
            background-color: black;
        }
    </style>
</head>
<body>
    <!-- <div class="box"> -->
    <div class="box clearfix">
        <div class="damao"></div>
        <div class="ermao"></div>
        <!-- <div style="clear:both"></div> -->
    </div>
    <div class="footer"></div>
</body>
</html>